<template>
  <div class="screen-wrapper">
    <div class="screen" id="screen">
      <screen-top @showAnimate="showAnimate"></screen-top>
      <div class="main">
        <transition name="fade" mode="out-in">
          <component :is="commentName" v-if="showCom"></component>
        </transition>
        <transition
          name="cloud"
          @before-enter="showCloud = true"
          @after-leave="showCloud = false"
        >
          <div v-if="showCloud" class="cloud-overlay">
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, toRef } from "vue";
import handleScreenAuto from "@/utils/tools/screenAuto";
import screenTop from "./comm/screenTop.vue";
import echartsScreen from "./comm/echartsScreen.vue";
const showCom = ref<boolean>(true);
const showCloud = ref<boolean>(false);
function showAnimate() {
  showCom.value = false;
  showCloud.value = true;
  setTimeout(() => {
    showCom.value = true;
    showCloud.value = false;
  }, 1000);
}

const commentName = toRef(echartsScreen);
onMounted(() => {
  handleScreenAuto();
  //浏览器变化时，跟着变化
  window.onresize = () => handleScreenAuto();
});
</script>
<style lang="scss" scoped>
.screen-wrapper {
  height: 100%;
  width: 100%;
  background: url("@/assets/img/bg_screen.jpg") no-repeat;
  background-size: cover;
  position: relative;
  transition: all 0.3s;
  .screen {
    display: inline-block;
    width: 1920px;
    height: 1080px;
    transform-origin: 0 0;
    position: absolute;
    top: 0;
    left: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    .main {
      width: 100%;
      margin-top: 20px;
      height: calc(100% - 100px);
      display: flex;
      justify-content: space-between;
      .left,
      .right {
        width: 25%;
        height: 100%;
        padding: 1rem;
        box-sizing: border-box;
      }
      .center {
        flex: 1;
        height: 100%;
        padding: 1rem;
        box-sizing: border-box;
      }
    }
  }
}
</style>